<template>
     <div >
       <Tabs value="name2" >
         <TabPane label="推荐场景管理" name="name2">
           <div class="search">
             <Button type="primary" icon="android-add"  @click="showModal"
                     style="margin-top: 4px;">新增推荐场景</Button>
             <div class="fr">
               <Input v-model="searchScene" placeholder="请输入推荐场景名称查询"
                      style="width: 300px"><Button slot="append" icon="ios-search" @click="handleSearch"></Button></Input>
             </div>

             <div class="fr" style="margin-top: 4px;margin-right: 40px;">
               <span style="margin-right: 10px;">选择渠道</span>
               <Select v-model="channel" style="width:200px" placeholder="请选择渠道" @on-change="channelChange">
                 <Option v-for="item in channelList" :value="item.channelId" :key="item.channelId">{{ item.channelName }}</Option>
               </Select>
             </div>


             <Modal
               v-model="addModal"
               title="新建/编辑推荐场景"
               @on-cancel="cancel">
               <newSceneForm  v-on:refreshbizlines="refreshSceneList" ref="sceneForm"></newSceneForm>
               <div slot="footer">

               </div>
             </Modal>

           </div>
           <Table border :columns="columns2" :data="data2"></Table>

           <Page :total="pageList2.length" size="small" :current="pageNum2" :pageSize="pageSize2"
                 @on-change="pageNumChange2" @on-page-size-change="pageSizeChange2"
                 show-total show-elevator show-sizer></Page>
         </TabPane>
         <!-- <TabPane label="推荐渠道管理" name="name1" style="position: relative;">
           <Spin class="spin" v-if="spinShow">
             <div class="search">
              <div class="fr">
                <Input v-model="searchChannel" placeholder="请输入需要查询的内容"
                       style="width: 300px"><Button slot="append" icon="ios-search"  class="btnsou1" @click="handleChannel"></Button></Input>
              </div>

            </div>

           <Table border :columns="columns1" :data="data1"></Table>
           <Page :total="pageList1.length" size="small" :current="pageNum1" :pageSize="pageSize1"
                 @on-change="pageNumChange1" @on-page-size-change="pageSizeChange1"
                 show-total show-elevator show-sizer></Page>
           </Spin>
         </TabPane> -->
       </Tabs>
     </div>
</template>

<script>
import newSceneForm from './newSceneForm.vue'

let constType = {
  "001":'按细分客群推荐',
  "002":'算法推荐',
  "003":'指定产品推荐',
}
  export default{
    data: function () {
      return {
      spinShow:false,

        pageList1:[],
        pageNum1:1,
        pageSize1:10,
        pageList2:[],
        pageNum2:1,
        pageSize2:10,
      //   columns1: [
      //     {
      //       type: 'index',
      //       title:'序号',
      //       width:100
      //     },
      //   {
      //     title: '推荐渠道ID',
      //     key: 'channelId'
      //   },
      //   {
      //     title: "渠道名称",
      //     key: 'channelName'
      //   },
      //   {
      //     title: '应用类型',
      //     key: 'appType'
      //   },
      //     {
      //       title: '黑/白名单',
      //       key: 'action',
      //       width: 150,
      //       align: 'center',
      //       render: (h, params) => {
      //         return h('div', [
      //           h('Icon', {
      //             props: {
      //               type: 'clipboard'
      //             },
      //             style: {
      //               marginRight: '15px',
      //               fontSize:'16px',
      //               cursor:'pointer'
      //             },
      //             on: {
      //               click: () => {
      //                 this.blackList(params.row)
      //               }
      //             }
      //           }, 'View')
                 

      //         ]);
      //       }
      //     }
      // ],
        data1: [],
        searchChannel:'',

        addModal:false,
        channel:"",
        channelList:[],
        searchScene:'',
        columns2: [
          {
            type: 'index',
            title:'序号',
            width:70
          },
          {
            title: '推荐渠道',
            key: 'channelName',
          },
          {
            title: "推荐场景ID",
            key: 'sceneId'
          },
          {
            title: '推荐类型',
            key: 'queryTypeId',
            render(h,params){
              return h('span',[constType[params.row.queryTypeId]])
            }
          },
          {
            title: "推荐场景名称",
            key: 'sceneName'
          },
          {
            title: "推荐结果数",
            key: 'sceneResult'
          },
          {
            title: "推荐内容",
            key: 'sceneDesc'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type:  'md-create'
                  },
                  style: {
                    marginRight: '15px',
                    fontSize:'16px',
                    cursor:'pointer'
                  },
                  on: {
                    click: () => {
                      this.showDetail(params.row)
                    }
                  }
                }, 'View'),
                 //下面是个组合，又要图标又要弹框，结合起来
                h('Poptip',{
                  props: {
                    
                    confirm:true,
                    title:"您确认删除这条内容吗？"
                  },

                  on:{

                    'on-ok':()=>{
                      this.deleteScene(params.row)
                    }
                  }
                },
                  [ h('Icon', {
                  props: {
                    type:  'ios-trash'
                  },
                  style: {
                    marginRight: '15px',
                    fontSize:'16px',
                    cursor:'pointer'
                  },
        
                }, 'Delete')],
                ),
                
               
              ]);
            }
          }
        ],
        data2:[]
      }

    },
    components: {newSceneForm},
    methods: {
      showModal(){
        this.addModal = true
        this.$refs.sceneForm.reset()
      },
      show(index){
        // console.log(index)
      },
      remove(index){
        // console.log(index)
      },
      ok () {
        //点击确定

      },
      cancel () {
        this.addModal= false;
        this.$refs.sceneForm.reset()
      },
      pageNumChange1(pageNum){
        this.pageNum1 = pageNum
        this.data1 = this.pageList1.slice((this.pageNum1-1)*this.pageSize1,this.pageNum1*this.pageSize1)
      },
      pageSizeChange1(pageSize){
        this.pageSize1 = pageSize
        this.data1 = this.pageList1.slice((this.pageNum1-1)*this.pageSize1,this.pageNum1*this.pageSize1)
      },
      pageNumChange2(pageNum){
        this.pageNum2 = pageNum
        this.data2 = this.pageList2.slice((this.pageNum2-1)*this.pageSize2,this.pageNum2*this.pageSize2)
      },
      pageSizeChange2(pageSize){
        this.pageSize2 = pageSize
        this.data2 = this.pageList2.slice((this.pageNum2-1)*this.pageSize2,this.pageNum2*this.pageSize2)
      },
      showDetail(row){
        this.api({
          url: "/scene/detail",
          method: "post",
          params:{
            id:row.sceneId
          }
        }).then(data => {
          console.log(data,11111111111111111111111111111111111)
          let formData = {
            channel:data.channelId,
            name: data.sceneName,
            ID: data.sceneId,
            num:data.sceneResult,
            desc:data.sceneDesc,
            proAttrIden:data.proAttrIden=="1"?true:false,
            recommendType:data.queryTypeId,
            algorithmId:data.algorithmId,
            proList:data.proList==""?data.proList:JSON.parse(data.proList)
          }
          this.addModal = true
          this.$refs.sceneForm.getDetails(formData)
        })
      },
      deleteScene(row){
        this.api({
          url: "/scene/delete",
          method: "post",
          params:{
            id:row.sceneId
          }
        }).then(data => {
          this.$Message.success('删除场景成功！');
          this.refreshSceneList()
        })
      },

      channelChange(val){
        this.api({
          url: "/scene/list",
          method: "post",
          params:{
            channel:val
          }
        }).then(data => {
          this.pageList2 = data;
          this.data2 = this.pageList2.slice(0,this.pageSize2)
        })
      },
      handleSearch(){
        this.api({
          url: "/scene/list",
          method: "post",
          params:{
            channel:this.channel,
            name:this.searchScene
          }
        }).then(data => {
          this.pageList2 = data;
          this.data2 = this.pageList2.slice(0,this.pageSize2)
        })
      },

      handleChannel(){
        this.api({
          url: "/channel/list",
          method: "post",
          params:{
            name:this.searchChannel
          }
        }).then(data => {
          this.pageList1 = data;
          this.data1 = this.pageList1.slice(0,this.pageSize1)
        })
      },

      refreshSceneList(){
        this.api({
          url: "/scene/list",
          method: "post"
        }).then(data => {
          this.pageList2 = data;
          this.data2 = this.pageList2.slice((this.pageNum2-1)*this.pageSize2,this.pageNum2*this.pageSize2)
        })
      },

      blackList(row){
        this.$router.push({path:'/blackList',query:{
             channelId:row.channelId,
             channelName:row.channelName
           }
        })
      }
    },
    created(){
      console.log(2222222222222222222222222)
      this.api({
        url: "/channel/list",
        method: "post"
      }).then(data => {
        console.log(data,33333333333333333333333333)
        this.pageList1 = data;
        this.channelList = data;
        this.data1 = this.pageList1.slice(0,this.pageSize1)
      })

      this.api({
        url: "/scene/list",
        method: "post"
      }).then(data => {
        this.pageList2 = data;
        this.data2 = this.pageList2.slice(0,this.pageSize2)
      })
    },
    mounted() {


    }
  }
</script>

<style lang="scss" scoped>
  @import "../../base";
   /deep/ .btnsou1{
    outline: none;
    height: 32px;
    vertical-align: middle;
    border:0;
    color:white;
    font-size: 20px;
    background: purple;
  }



  .search {
    height: 60px;
  }
  .ivu-input-wrapper {
    margin-top: 4px;
  }
 
.ivu-icon-ios-search {
  font-size: 20px;
  color: #FFFFFF;
}
  .fr {
    float: right;
    margin-right: 20px;
  }
  .ivu-input-wrapper{
    /*display: inline-block;*/
  }
  .spin {
    width: 100%;
    height: 400px;
  }
  .ivu-icon.ivu-icon-help-circled{
    left: 10px;
  }
  .ivu-poptip-confirm .ivu-poptip-footer{
    padding: 8px;
    text-align: center;
  }
  .ivu-poptip-confirm .ivu-poptip-body {
    padding: 8px;
  }
  .ivu-poptip-content {
    margin-right: 20px;
  }
  .ivu-select {
    position: relative;
  }
  .ivu-select-dropdown{
    top:32px!important;
    left: 0!important;
  }
</style>
